<template>
  <div class="rang">44</div>
</template>
<script lang="ts" setup>
import { ElRow, ElCol } from 'element-plus';
import { ref, onMounted, onBeforeUnmount, defineProps } from 'vue';
import { useRouter } from 'vue-router';
import { openWindow } from '@vben/utils';
// import Hls from 'hls.js';
const props = defineProps({});
const router = useRouter();
const getSpan = (index) => {
  switch (props.changeViewId) {
    case 1:
      return 24;
    case 2:
      return 12;
    case 3:
      return index === 0 ? 16 : 8;
    default:
      return 8;
  }
};
let hlsInstances: Record<number, Hls> = {};

const navToClick = () => {
  let nav = '/dronemonitoringDetail';
  if (nav?.startsWith('http')) {
    openWindow(nav);
    return;
  }
  if (nav?.startsWith('/')) {
    router.push(nav).catch((error) => {
      console.error('Navigation failed:', error);
    });
  } else {
    console.warn(`Unknown URL for navigation item: ${nav.title} -> ${nav.url}`);
  }
};
onMounted(() => {
  // props.droneList.forEach((item, index) => {
  //   const videoElement = document.getElementById(`video-${index}`);
  //   if (videoElement && Hls.isSupported()) {
  //     const hls = new Hls();
  //     hls.loadSource(item.streamUrl); // 假设每个无人机项都有一个 streamUrl 属性
  //     hls.attachMedia(videoElement);
  //     hls.on(Hls.Events.MANIFEST_PARSED, function () {
  //       videoElement.play();
  //     });
  //     hlsInstances[index] = hls;
  //   } else if (
  //     videoElement &&
  //     videoElement.canPlayType('application/vnd.apple.mpegurl')
  //   ) {
  //     videoElement.src = item.streamUrl; // 假设每个无人机项都有一个 streamUrl 属性
  //     videoElement.addEventListener('canplay', function () {
  //       videoElement.play();
  //     });
  //   }
  // });
});
onBeforeUnmount(() => {
  // Object.values(hlsInstances).forEach((hls) => {
  //   hls.destroy();
  // });
});
</script>

<style lang="scss" scoped>
.rang {
  width: 100%;
  height: 100%;
  border: 1px solid #fff;
}
</style>
